import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import action from '../../store/action'
import { withRouter } from 'react-router-dom'
import Alert from '../../components/alert'
import './index.less'

function Circle(props) {
    function click(flag) {
        if (flag) {
            setCount({ ...count, flag: false })
        }
    }
    const [count, setCount] = useState({
        flag: false
    })
    useEffect(() => {
        props.getUser()
        props.getCircle()
    }, [])
    let token = JSON.parse(sessionStorage.getItem('token'))
    console.log(props);
    return (
        <div className="Circle">
            <div className="c_top">
                <h4>成都市双流区华府大道四段双兴...</h4>
                <p onClick={() => {
                    props.history.push('/my')
                }}><img src={token.img} alt="" /></p>
                <p className="iconfont icon-duanxin"></p>
            </div>
            <div className="c_Color">
                <div className="flex">
                    <div className="cont">
                        <p><img src="https://img0.baidu.com/it/u=3298248483,4082620004&fm=26&fmt=auto" alt="" /></p>
                        <div>
                            <p>每日折扣群</p>
                            <p>为你精心挑选折扣商品</p>
                        </div>
                        <p>
                            <button>加入群聊</button>
                        </p>
                    </div>
                </div>
                <div className="title">
                    发现新生活
                </div>
            </div>
            <div className="list">
                {
                    props.circle.navList.map((item, index) => {
                        return (
                            <div key={index} className="con" onClick={() => {
                                setCount({ ...count, flag: true })
                                props.CircleXq(item)
                            }}>
                                <p><img src={item.img} className="img" alt="" /></p>
                                <p className="Jj">{item.Jj}</p>
                                <div className="item">
                                    <p>
                                        <img src={item.img} className="img1" alt="" />
                                        <span>{item.name}</span>
                                    </p>
                                    <p>
                                        <span className="iconfont icon-dianzan"></span>
                                        <span>{item.Zan}</span>
                                    </p>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="no">
                ——没有更多了——
            </div>
            {
                count.flag ? <Alert close={click} /> : null
            }
        </div>
    )
}
export default connect(state => state, action.circle)(withRouter(Circle))